<template>
  <view class="index">
    <view
      class="tabs"
      :class="{ nolist: !list.length }"
    >
      <view
        v-for="item in orderStatus"
        :key="item.key"
        :class="[
          'tab',
          { active: state === item.key },
          { disbale: page.loading }
        ]"
        @click="active(item)"
      >
        {{ item.value }}
      </view>
    </view>
    <view class="list">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="item"
      >
        <view class="head">
          <view class="left">
            {{ item.createTime || '' }}
          </view>
          <view :class="['right']">
            {{ orderStatus.find(e => e.key === item.orderStatus ).value || '' }}
          </view>
        </view>
        <view
          class="middle"
          @click="$jumpUrl(`/subPages/personalCenter/order/detail?id=${item.id}`)"
        >
          <image
            class="left"
            :src="item.productImage"
            mode="aspectFill"
          />
          <view class="center">
            <view class="title">
              <p class="font-14 color-333 font-weight-500 title-line-clamp">
                {{ item.productName }}
              </p>
              <p class="font-13 color-555">
                ￥{{ item.price }}
              </p>
            </view>
            <view class="title">
              <p class="font-12 color-999">
                出发日期: {{ item.touristDate || '' }}
              </p>
              <p class="font-12 color-999">
                X {{ item.buyNumber }}
              </p>
            </view>
            <view class="price color-333 font-weight-500 font-17">
              ￥{{ item.amount }}
            </view>
          </view>
        </view>
        <view class="foot">
          <view class="actual-price color-333 font-14 font-weight-500">
            实付总额 ￥ {{ item.realAmount }}
          </view>
          <view class="operation">
            <button
              v-if="item.orderStatus === 'WAIT_USE' && item.refundFlag === 'Y'"
              class="btn"
              @click="$jumpUrl(`/subPages/personalCenter/order/refund?id=${item.id}`)"
            >
              申请退款
            </button>
            <button
              v-if="item.orderStatus === 'NEW'"
              class="btn"
              @click="$jumpUrl(`/subPages/personalCenter/order/detail?id=${item.id}`)"
            >
              取消订单
            </button>
            <button
              v-if="item.orderStatus === 'NEW'"
              class="btn topay"
              @click="$jumpUrl(`/subPages/personalCenter/order/detail?id=${item.id}`)"
            >
              立即付款
            </button>
          </view>
        </view>
      </view>
      <view 
        v-if="!list.length"
        class="emptyPage"
      >
        <view>
          暂无数据
        </view>
      </view>
    </view>
    <!-- 加载完毕底部文字描述 -->
    <p
      v-if="end"
      class="end"
    >
      没有更多
    </p>
  </view>
</template>
<script>
	export default {
		data() {
			return {
				orderStatus: [{
						key: '',
						value: '全部订单'
					},
					{
						key: 'NEW',
						value: '待付款'
					},
					{
						key: 'WAIT_USE',
						value: '未出行'
					},
					{
						key: 'REFUNDING',
						value: '退款中'
					},
					{
						key: 'REFUNDED',
						value: '退款成功'
					},
					{
						key: 'REFUNDREFUSED',
						value: '拒绝退款'
					},
					{
						key: 'FINISHED',
						value: '订单完结'
					},
					{
						key: 'CANCEL',
						value: '已取消'
					},
				],
				list: [],
				commentFlag: '',
				state: '',
				page: {
					page_size: 10,
					current_page: 1,
					count: 0,
					loading: false,
					finished: false,
				},
				count: 0,
				end: false,
				first: true
			};
		},
		onLoad(options) {
			if(options.status) {
			console.log('当前页面的参数', options, this.first);
				this.state = options.status;
				this.queryData('', options.status);
			} else {
				this.queryData();
			}
		},
		onShow() {
			if(!this.first) {
				// console.log('onShow', this.first);
				this.list = [];
				this.page.current_page = 1;
				this.queryData();
			}
			this.first = false;
		},
		onPullDownRefresh() {
			this.list = [];
			this.page.current_page = 1;
			this.queryData('refresh');
		},
		onReachBottom() {
			if (this.list.length < this.page.count) {
				this.queryData();
			}
		},
		methods: {
			active(val) {
				this.state = val.key;
				this.list = [];
				this.page.current_page = 1;
				this.queryData('', val.key);
			},
			handleClick(item) {
				console.log('item', item);
			},
			// 列表获取
			queryData(status, orderStatus) {
				uni.showLoading({
					title: '加载中'
				});
				this.page.loading = true;
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/order/listByVo',
					data: {
						current_page: this.page.current_page,
						page_size: this.page.page_size,
						orderStatus: orderStatus ? orderStatus : this.state
					}
				}).then(res => {
					this.list.push.apply(this.list, res.data);
					this.page.count = res.count;
					this.page.loading = false;
					if (this.list.length >= this.page.count) {
						this.page.finished = true;
					}
					this.page.current_page += 1;
					if (status === 'refresh') {
						uni.stopPullDownRefresh();
					}
				}).finally(err => {
					uni.hideLoading();
				});
			},
		}
	};
</script>
<style lang="less" scoped>
  .emptyPage {
    text-align: center;
    view {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
	.end {
		padding: 40rpx 0;
		text-align: center;
		font-size: 28rpx;
	}

	.index {
		min-height: 100vh;
		background-color: #f7f9fb;

		.tabs {
			height: 127rpx;
			background: #ffffff;
			white-space: nowrap;
			overflow-x: auto;

			&::-webkit-scrollbar {
				width: 0;
				height: 0;
				display: none;
			}

			&.nolist {
				border-radius: 0;
			}

			.tab {
				display: inline-block;
				color: #555555;
				font-size: 28rpx;
				padding: 0 25rpx;
				text-align: center;
				line-height: 107rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
			}

			.disbale {
				pointer-events: none;
			}

			.active {
				position: relative;
				color: #fd882a;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translate3d(-50%, 0, 0);
					width: 70rpx;
					height: 10rpx;
					background: #fd882a;
					border-radius: 25%;
				}
			}
		}

		.list {
			margin: 20rpx 15rpx 0;

			.item {
				width: 720rpx;
				border-radius: 10rpx;
				background-color: #ffffff;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;

				.head {
					height: 67rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e8e8e8;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999;
					}

					.right {
						font-size: 26rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #fd882a;
					}

					.topay {
						color: #f4640e !important;
					}

					.refund {
						color: #3873e1 !important;
					}
				}

				.middle {
					display: flex;
					justify-content: space-between;
					padding: 20rpx;

					.left {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.center {
						flex: 1;
						position: relative;
						margin-left: 10rpx;

						.title {
							display: flex;
							line-height: 44rpx;
							max-height: 88rpx;
							overflow: hidden;
							margin-bottom: 4rpx;
							justify-content: space-between;
						}

						.price {
							// position: absolute;
							bottom: 0;
							left: 0;
						}
					}

					.right {
						width: 70rpx;
					}
				}

				.foot {
					text-align: right;
					padding: 0 20rpx;

					.operation {
						margin-top: 22rpx;
						display: flex;
						justify-content: flex-end;
					}

					.btn {
						width: 154rpx;
						height: 60rpx;
						font-size: 26rpx;
						color: #999;
						border-radius: 30rpx;
						border: 1rpx solid #999999;
						margin-left: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.topay {
						border: none;
						background: linear-gradient(312deg, #ffc77b 0%, #f78833 100%);
						color: #fff;
					}
				}
			}
		}
	}
</style>
